<template>
  <div>
    <h1>人员名单及爱好列表</h1>
    <ul>
      <li v-for="p in person" :key="p.id">
        <h3>姓名:{{ p.name }}</h3>
        <p>
          爱好:
          <span v-for="item in p.hobby" :key="item">
            {{ item }}
          </span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      person: [
        { id: 1, name: "老余", hobby: ["吃", "喝", "Piao"] },
        { id: 2, name: "陈伟", hobby: ["唱", "跳", "Rap"] },
        { id: 3, name: "老李", hobby: ["打球", "看书", "写字"] },
      ],
    };
  },
};
</script>

<style></style>
